<template>
	<view v-if="fpData">
		<view style="margin: 10px 0;padding: 10px;background-color: #fff;">
			<!-- <view >电子发票:  已开具{{fpData.kpStatus}}</view>
			<view style="margin: 10px 0;">发票代码:  050002200311</view>
			<view >发票号码:  61843658</view> -->

			<view style="display: flex; margin-bottom: 10px;">
				<text
					style="width: 70px;display:inline-block;text-align-last: justify;color: #aaa;margin-right: 20rpx;">开票状态:</text>
				<text
					:style="{'flex':'1','color':fpData.kpStatus==2?'green':fpData.kpStatus==3?'orange':fpData.kpStatus==9?'red':''}">{{statusName(fpData.kpStatus)}}</text>
			</view>
			<view style="display: flex; margin-bottom: 10px;">
				<text
					style="width: 70px;display:inline-block;text-align-last: justify;color: #aaa;margin-right: 20rpx;">客户名称:</text>
				<text style="flex:1">{{fpData.basCus.name}}</text>
			</view>

			<view style="display: flex; margin-bottom: 10px;">
				<text
					style="width: 70px;display:inline-block;text-align-last: justify;color: #aaa;margin-right: 20rpx;">申请人:</text>
				<text style="flex:1">{{fpData.creator.userName}}</text>
			</view>

			<view style="display: flex; margin-bottom: 10px;">
				<text
					style="width: 70px;display:inline-block;text-align-last: justify;color: #aaa;margin-right: 20rpx;">申请时间:</text>
				<text style="flex:1">{{fpData.createDate}}</text>
			</view>

			<view style="display: flex; margin-bottom: 10px;">
				<text
					style="width: 70px;display:inline-block;text-align-last: justify;color: #aaa;margin-right: 20rpx;">开票人:</text>
				<text style="flex:1">{{fpData.overUser.userName?fpData.overUser.userName:''}}</text>
			</view>

			<view style="display: flex; margin-bottom: 10px;">
				<text
					style="width: 70px;display:inline-block;text-align-last: justify;color: #aaa;margin-right: 20rpx;">开票时间:</text>
				<text style="flex:1">{{fpData.overDate?fpData.overDate:''}}</text>
			</view>

			<view style="display: flex; margin-bottom: 10px;">
				<text
					style="width: 70px;display:inline-block;text-align-last: justify;color: #aaa;margin-right: 20rpx;">申请备注:</text>
				<text style="flex:1">{{fpData.remarks}}</text>
			</view>

			<view v-if="fpData.kpStatus==9" style="display: flex; margin-bottom: 10px;">
				<text
					style="width: 70px;display:inline-block;text-align-last: justify;color: #aaa;margin-right: 20rpx;">取消原因:</text>
				<text style="flex:1">{{fpData.cancleRemarks}}</text>
			</view>
			<!-- <view style="margin-bottom: 10px;">状态:  {{ statusName(fpData.kpStatus)}}</view>
			<view style="margin-bottom: 10px;">客户:  {{fpData.basCus.name}}</view>
			<view style="margin-bottom: 10px;">申请人:  {{fpData.creator.userName}}</view>
			<view style="margin-bottom: 10px;">申请时间:  {{fpData.createDate}}</view>
			<view style="margin-bottom: 10px;">开票人:  {{fpData.overUser.userName?fpData.overUser.userName:''}}</view>
			<view style="margin-bottom: 10px;">开票时间:  {{fpData.overDate?fpData.overDate:''}}</view>
			<view >备注:  {{fpData.remarks}}</view> -->
		</view>

		<view style="padding: 10px;background-color: #fff;">
			<view style="margin: 10px 0 20px;font-weight: bold;">
				发票详情
			</view>

			<view style="display: flex; margin-bottom: 10px;">
				<text
					style="width: 70px;display:inline-block;text-align-last: justify;color: #aaa;margin-right: 20rpx;">发票类型:</text>
				<text style="flex:1">{{fpData.kpInfo.ctype == 1?'个人':'单位'}}</text>
			</view>
			<view style="display: flex; margin-bottom: 10px;">
				<text
					style="width: 70px;display:inline-block;text-align-last: justify;color: #aaa;margin-right: 20rpx;">发票抬头:</text>
				<text style="flex:1">{{fpData.kpInfo.cname}}</text>
			</view>
			<view v-if="fpData.kpInfo.ctype == 2" style="display: flex; margin-bottom: 10px;">
				<text
					style="width: 70px;display:inline-block;text-align-last: justify;color: #aaa;margin-right: 20rpx;">发票税号:</text>
				<text style="flex:1">{{fpData.kpInfo.dutyNo}}</text>
			</view>
			<view style="display: flex; margin-bottom: 10px;">
				<text
					style="width: 70px;display:inline-block;text-align-last: justify;color: #aaa;margin-right: 20rpx;">发票金额:</text>
				<text style="flex:1">{{fpData.isum}}元</text>
			</view>

			<!-- <view style="margin-bottom: 10px;">
				<text style="color: #aaa;margin-right: 20rpx;">发票类型:</text>
				<text>{{fpData.kpInfo.ctype == 1?'个人':'单位'}}</text>
			</view>
			<view style="margin-bottom: 10px;">
				<text style="color: #aaa;margin-right: 20rpx;">发票抬头:</text>
				<text>{{fpData.kpInfo.cname}}</text>
			</view>
			<view v-if="fpData.kpInfo.ctype == 2" style="margin-bottom: 10px;">
				<text style="color: #aaa;margin-right: 20rpx;">发票税号:</text>
				<text>{{fpData.kpInfo.dutyNo}}</text>
			</view>
			<view style="margin-bottom: 10px;">
				<text style="color: #aaa;margin-right: 20rpx;">发票金额:</text>
				<text>{{fpData.isum}}元</text>
			</view> -->

		</view>
		<view @click="record"
			style="margin: 10px 0;padding: 20px;font-weight: bold;display: flex;justify-content: space-between;background-color: #fff;">
			<view>
				发票含<text style="color: red;">{{fpData.cusFpApplyRdsList.length}}</text>个订单
			</view>
			<view>
				查看记录 >
			</view>
		</view>
		<view v-if="fpData.fpUrl"
			style="margin: 10px 0;padding: 20px;font-weight: bold;display: flex;justify-content: space-between;background-color: #fff;">
			<view>
				发票链接
			</view>
			<view @click="copy" style="color: #00aaff;">
				复制链接
			</view>
		</view>
		<view style="margin: 10px 0;padding: 20px;font-weight: bold;background-color: #fff;">
			<view>
				申请附件：
			</view>
			<js-uploadfile v-model="fpData.dataMap" maxCount="0" :biz-key="fpData.id"
				biz-type="cusFpApply_image"></js-uploadfile>
		</view>
		<!-- <view style="margin: 10px 0;padding: 20px;font-weight: bold;background-color: #fff;" @click="xiazai">
			<view >
				发票附件：
			</view>
			<js-uploadfile v-model="fpData.dataMap" maxCount="0" :biz-key="fpData.id" biz-type="cusFpApply_file"></js-uploadfile>
		</view> -->

		<u-modal v-model="show" title="提示" @confirm="confirm">
			<view style="text-align: center;padding: 20px;">
				发票地址复制成功，请在浏览器中粘贴进行下载
			</view>
		</u-modal>
	</view>
</template>

<script>
	import util from '@/common/fire.js'
	export default {

		data() {
			return {
				fpData: '',
				show: false
			}
		},
		onLoad(params) {
			// let data = params.id
			// this.fpData = data
			this.$u.api.shop.fpApplyForm({
				id: params.id
			}).then(res => {
				this.fpData = res.cusFpApply
			})

			// this.$u.api.shop.fileList({bizKey:params.id,bizType: 'cusFpApply_file'}).then(res => {
			// 	console.log(res,'res==');
			// })

		},
		methods: {
			statusName(type) {
				let status = ''
				if (type == 1) {
					status = '申请中'
				} else if (type == 2) {
					status = '已开票'
				} else if (type == 3) {
					status = '开票中'
				} else if (type == 9) {
					status = '已取消'
				}
				return status
			},
			// 复制
			async copy() {
				console.log(this.fpData.fpUrl, 'this.fpData.fpUrl==');
				await uni.setClipboardData({
					data: this.fpData.fpUrl,
					success: () => {}
				});
				this.show = true
			},
			record() {
				// uni.navigateTo({
				// 	url: '/pages/btdm/index/user/invoice/record',
				// })
				let that = this
				uni.navigateTo({
					url: '/pages/btdm/index/user/invoice/record',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						// 其中含有两个参数，第一个是接收的函数名，第二个则是需要携带的参数
						res.eventChannel.emit('acceptData', that.fpData)
					}
				})
			},
			xiazai() {
				plus.runtime.openURL('https://xcx.mnbtdm.com:3100/BTDM/a/file/download/1747185385713352704');
				
				
				// let url =this.vuex_config.baseUrl+ this.vuex_config.adminPath + '/file/download/' + '1747185385713352704';
				
				// console.log(url);
				// uni.downloadFile({
				// 	url:'https://xcx.mnbtdm.com:3100/BTDM/a/file/download/1747185385713352704', //下载地址接口返回
				// 	success: data => {
				// 		console.log(data, 'data====');
				// 		if (data.statusCode === 200) {
				// 			//文件保存到本地
				// 			uni.saveFile({
				// 				tempFilePath: data.tempFilePath, //临时路径
				// 				success: function(
				// 					res
				// 				) {
				// 					uni.showToast({
				// 						icon: 'success',
				// 						mask: true,
				// 						title: '文件已保存：' + res.savedFilePath,
				// 						// title:'下载成功’,
				// 						duration: 2000,
				// 					});
				// 					console.log(res, 'res====');
				// 					setTimeout(() => {
				// 						//打开文档预览
				// 						uni.openDocument({
				// 							filePath: res.savedFilePath,
				// 							success: function(
				// 								res
				// 							) {
				// 								console.log(
				// 									'打开成功'
				// 								);
				// 							}
				// 						});
				// 					}, 2000);
				// 				}
				// 			});
				// 		}
				// 	},
				// 	fail: err => {
				// 		uni.showToast({
				// 			icon: 'none',
				// 			title: '失败请重新下载'
				// 		});
				// 	}
				// });

			},
			confirm() {

			}
		},


	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 98%;
		text-align: center;
		overflow: scroll;
	}

	/deep/ .u-progress.data-v-0d33af60 {
		display: none;
	}

	.item-menu-image {
		width: 100px;
		height: 85px;
	}

	textarea {
		width: 100%;
		height: 260rpx;
		background-color: #f7f7f7;
		line-height: 60rpx;
		// margin: 40rpx auto;
		padding: 20rpx;
	}
</style>